import styled from 'styled-components'
export const SearchWrapper = styled.div`
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  padding:40px;
  background-color:#fff;
`
export const TabsWrapper = styled.div`
  .tabs{
    display:flex;
    height:42px;
    line-height:42px;
    border:1px solid #ccc;
    border-top:none;
    border-bottom:none;
    background-color:#eee;
  }
  .content{
    margin-top:20px;
  }
`
export const ItemWrapper = styled.div`
  cursor:pointer;
  font-size:14px;
  color:#333;
  text-align:center;
  width:12.5%;
  border-bottom:${props => props.isActive ? 'none' : '1px solid #ccc'}; 
  border-right:${props => props.isActive ? '1px solid #ccc' : 'none'};
  border-left:${props => props.isActive ? '1px solid #ccc' : 'none'};
  border-top:${props => props.isActive ? '2px solid red' : 'none'};
  background-color:${props => props.isActive ? '#fff' : 'none'};
  &:first-child{
    border-left:none;
  }
  &:last-child{
    border-right:none;
  }
`